<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-01 11:11:14
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 09:33:00
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>this is test</div>
  <a-upload-dragger
    v-model:fileList="fileList"
    name="file"
    :multiple="false"
    :customRequest="customRequest"
    @change="handleChange"
    @drop="handleDrop"
    :beforeUpload="beforeUpload"
    :maxCount="1"
  >
    <p class="ant-upload-drag-icon">
      <inbox-outlined></inbox-outlined>
    </p>
    <p class="ant-upload-text">Click or drag file to this area to upload</p>
    <p class="ant-upload-hint">
      Support for a single or bulk upload. Strictly prohibit from uploading
      company data or other band files
    </p>
  </a-upload-dragger>

  <input
    type="file"
    id="avatar"
    name="avatar"
    accept="image/png, image/jpeg"
    multiple
    required
    @change="changeFile"
  />
  <img :src="url" halt="" style="width: 500px; height: 100px" />
</template>

<script setup>
import {
  download,
  upload,
  updataPersonalMsg,
  getUserById,
} from "@/service/api.js";
import { ref } from "vue";
import { message } from "ant-design-vue";
const name = ref("");
const url = ref("");
// const changeFile = async (e) => {
//   console.log(e);
//   const formData = new FormData();
//   const file = e.target.files[0];
//   console.log(file);

//   formData.append("file", file);

//   const res = await updataPersonalMsg(formData);
//   console.log(res);
//   name.value = res.data;
//   console.log("name", name.value);

//   load();
// };
const arrayBufferToBase64 = (buffer) => {
  var binary = "";
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
};
// 获取可用的url
const load = async () => {
  if (name.value) {
    console.log(name.value);

    const res = await download({ name: name.value });
    // console.log(res); //buffer
    // url.value = "data:image/jpeg;base64," + arrayBufferToBase64(res);
    // url.value = res;
    // console.log(url.value); //可用的url
    url.value = `http://i79768a535.zicp.fun:23570/common/download?name=${name.value}`;
    console.log(url.value);
  }
};
// 存储文件
const fileList = ref([]);
const handleChange = (info) => {
  const status = info.file.status;
  if (status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} file uploaded successfully.`);
  } else if (status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
const customRequest = async (file) => {
  // file 是上传的文件 其内容会在放在下面截图中
  // 后端需要接受的参数是 formData数据，
  const form = new FormData();
  console.log(file);

  form.append("file", file.file);

  const res = await upload(form);
  console.log(res);
  if (res.code === 1) {
    // 调用组件内方法, 设置为成功状态
    file.onSuccess(res, file.file);
    file.status = "done";
    //查询用户信息
    // const details = await getUserById({ userId: 2 });
    // console.log(details);
    // name.value = details.data.headSculpture;
    name.value = res.data;
    load();
  } else {
    file.onError();
    file.status = "error";
  }
};
// const beforeUpload = () => {
//   // 2、控制上传的文件大小
//   if (file.size / 1024 / 1024 > 2) {
//     message.warning("文件大小超过最大限度3MB");
//       file.status = "error";
//     console.log(1);

//     return false;
//   }
//   // 3、控制上传文件不能为空
//   if (file.size === 0) {
//     message.warning("所选信息中存在空文件或目录，请重新选择");
//       file.status = "error";
//     console.log(2);

//     return false;
//   }
// };
function handleDrop(e) {
  console.log(e);
}
</script>
<style scoped></style>
<style scoped></style>
